<template>
  <view class="cl-dialog__wrapper">
    <mui-popup v-model="visible"
               direction="center"
               :close-on-click-modal="closeOnClickModal"
               :size="width"
               :border-radius="16"
               :padding="0"
               @close="onClose"
               @closed="onClosed"
    >
      <view class="cl-dialog">
        <!-- 顶部 -->
        <view v-if="title" class="cl-dialog__header">
          <slot name="header">
            {{ title }}
          </slot>
        </view>

        <!-- 内容 -->
        <view class="cl-dialog__container" :style="{ textAlign }">
          <slot> </slot>
        </view>

        <!-- 底部 -->
        <view v-if="$slots.footer" class="cl-dialog__footer">
          <slot name="footer">
          </slot>
        </view>

        <!-- 关闭按钮 -->
        <view v-if="showCloseBtn" class="cl-dialog__close" @tap="close">
          <text class="cl-icon-close" />
        </view>
      </view>
    </mui-popup>
  </view>
</template>

<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent, ref, watch } from 'vue'
import MuiPopup from '../mui-popup/mui-popup.vue'

export default defineComponent({
  name: 'ClDialog',
  components: {
    MuiPopup
  },
  props: {
    // 是否可见
    modelValue: Boolean,
    // 标题
    title: String,
    // 文字对齐
    textAlign: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'left',
    },
    // 宽度
    width: {
      type: String,
      default: '80%',
    },
    // 点击遮罩层是否关闭
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    // 显示关闭按钮
    showCloseBtn: Boolean,
  },

  setup(props, { emit }) {
    const visible = ref(false)

    watch(
      () => props.modelValue,
      (val) => {
        visible.value = val
      },
      {
        immediate: true,
      },
    )

    function open() {
      visible.value = true
    }

    function close() {
      visible.value = false
    }

    function onClose() {
      emit('update:modelValue', false)
      emit('close')
    }

    function onClosed() {
      emit('closed')
    }

    return {
      visible,
      open,
      close,
      onClose,
      onClosed,
    }
  },
})
</script>

<style lang="scss" scoped>
@use './dialog.scss';
</style>
